<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="点评"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="detail-box">
				<view class="detail">
					<view class="detail-data">
						<view class="detail-data-title">
							{{detail.name}}
						</view>
						<view class="detail-data-info">
							<text>{{detail.education}}</text>
							<text>{{detail.workType}}</text>
							<text>{{detail.isMianyi==1? '面议': '日薪' + Math.floor(detail.workSalary)}}</text>
						</view>
						<view class="detail-data-line tag">
							<van-icon name="bookmark-o" color="#59a8ff" style="margin-right: 4upx;" />
							<text>{{detail.school}}</text>-
							<text>{{detail.school && detail.major? '-'+detail.major:detail.major}}</text>
						</view>
					</view>
					<view class="detail-user">
						<view class="detail-user-picdir">
							<image :src="baseImage + detail.avatar" mode="" v-if="detail.avatar"></image>
							<image :src="baseImage + usual.seekerAvatar2" mode="" v-else-if="detail.sex=='女'"></image>
							<image :src="baseImage + usual.seekerAvatar1" mode="" v-else></image>
							<view class="detail-user-sex">
								<image :src="imgUrl + 'manIcon.png'" mode="" v-if="detail.sex=='男'"></image>
								<image :src="imgUrl + 'womanIcon.png'" mode="" v-else-if="detail.sex=='女'"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="item-title">基本信息</view>
					<view class="item-info-box">
						<view class="item-info" v-if="detail.gangwei">
							<text>岗位标签：{{detail.gangwei}}</text>
						</view>
						<view class="item-info">
							<text>岗位薪资：{{detail.isMianyi==1? '面议': '日薪' + Math.floor(detail.workSalary)}}</text>
						</view>
						<view class="item-info" v-if="detail.workExperience">
							<text>工作经验：{{detail.workExperience}}</text>
						</view>
						<view class="item-info" v-if="detail.workType">
							<text>工作形式：{{detail.workType}}</text>
						</view>
						<view class="item-info" v-if="detail.workType">
							<text>工作时间：{{detail.workTime}}</text>
						</view>
						<view class="item-info" v-if="detail.city||detail.addr ">
							<text>工作地址：{{`${detail.city || ''} ${detail.addr || ''}`}}</text>
						</view>
					</view>
				</view>
				<view class="item" v-if="detail.cnt">
					<view class="item-title">人才简介</view>
					<view class="item-info-box">
						<view class="item-brief">
							<text>{{detail.cnt}}</text>
						</view>
					</view>
					
				</view>
				<view class="item">
					<view class="item-title">联系方式</view>
					<view class="item-info-box">
						<view class="item-info">
							<text class="item-label">联系电话：</text>
							<text class="item-value">{{detail.tel}}</text>
							<view class="item-btn">
								查看
							</view>
							<view class="item-btn">
								复制
							</view>
						</view>
						<view class="item-info" v-if="detail.wechat">
							<text class="item-label">微信号：</text>
							<text class="item-value">{{detail.wechat}}</text>
							<view class="item-btn">
								查看
							</view>
							<view class="item-btn">
								复制
							</view>
						</view>
					</view>
				</view>

			 
			</view>
		</view>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}" v-if="!isOk">
			<view class="main-button-remark" @click="showChange">
				结业点评
			</view>
		</view>
		<view class="main-bj">

		</view>
		
		<van-popup :show="show" position="bottom" @close="show=false" closeable >
			<view class="common popup"  :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
				<view class="common-label">
					结业点评
				</view>
				<view class="common-line">
					<text>专业技能：</text>
					<van-rate v-model="form.major"  color="#ee5c36" void-icon="star" void-color="#c7c7c7" />
				</view>
				<view class="common-line">
					<text>工作态度：</text>
					<van-rate v-model="form.attitude"  color="#ee5c36" void-icon="star" void-color="#c7c7c7" />
				</view>
				<view class="common-line">
					<text>工作成绩：</text>
					<van-rate v-model="form.score"  color="#ee5c36" void-icon="star" void-color="#c7c7c7" />
				</view>
			</view>
			<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
				<view class="main-button-remark" @click="submit">
					确认提交
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {getRemarkToCompany,remarkSubmit} from "@/core/web-api/qiyeduan.js"
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				show:false,
				isExpandedBasic: false,
				isExpandedBrief: false,
				isExpandedRemark:false,
				detail: {},
				form:{
					major:0,
					attitude:0,
					score:0,
				},
				dataList:[
				],
				bottomBtnHeight: uni.upx2px(90),
				id:"",
				isOk:false,
			}
		},
		methods: {
			/**
			 * 弹窗打开
			 */
			showChange(){
				this.show = true;
			},
			
			/**
			 * 提交
			 * @param {Object} type
			 */
			submit(){
				console.log("AAAAAAAAA");
				remarkSubmit({
					id:this.id,
					...this.form
				}).then(res=>{
					if(res.code==20000){
						this.show = false;
						this.isOk = true;
					}
				console.log("AAAAAAAAA");
					uni.showToast({
						title:"操作成功",
						icon:"none"
					})
					uni.navigateTo({
						url:"/pages/ucenter/qiyeduan/remark/list"
					})
				})
			},
			
			expandedChange(type) {
				this[type] = !this[type]
			},
			/**
			 * 获取详情
			 */
			getDetail(){
				getRemarkToCompany({id:this.id}).then(res=>{
					if(res.code==20000){
						this.detail = res.data.detail;
						this.dataList = res.data.detail.companyList || []
					}
				})
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage','imgUrl','usual']),
			getDataList(){
				return function(){
					let list = [];
					if(this.isExpandedRemark){
						list = this.dataList
					}else{
						list = this.dataList.slice(0,2)
					}
					return list;
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail()
		}
	}
</script>

<style scoped lang="less">
	.contentVisible {
		overflow: hidden;
		transition: all 2s ease;
		height: 190upx;
		/* 初始高度，设置为展示一半的内容 */
		padding: 0;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		/* 设置显示的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* 隐藏超出部分 */
	}

	/* 扩展状态的样式 */
	.contentVisible.expanded {
		height: auto;
		display: -webkit-box;
		-webkit-line-clamp: unset;
		/* 设置显示的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;

		/* 展开后自动调整高度 */
	}

	.infoVisible {
		overflow: hidden;
		transition: all 2s ease;
		height: 190upx;
		/* 初始高度，设置为展示一半的内容 */
		padding: 0;
		text{
			display: -webkit-box;
			-webkit-line-clamp: 5;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			/* 隐藏超出部分 */
		}
			

	}

	/* 扩展状态的样式 */
	.infoVisible.expanded {
		height: auto;
		text{
			display: -webkit-box;
			-webkit-line-clamp: unset;
			/* 设置显示的行数 */
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		/* 展开后自动调整高度 */
	}

	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
		
		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;
			&-remark {
				width: 100%;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}

	}

	.detail {
		&-box {
			width: 100%;
			margin-top: 36upx;
			position: static;
			z-index: 2;
		}

		background-color: #fff;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		border-radius: 8upx;
		padding:30upx;
		box-sizing: border-box;
		margin-bottom: 40upx;
		width: 100%;
		display: flex;

		&-data {
			flex: 1;
			padding-right: 20upx;
			box-sizing: border-box;

			&-title {
				font-size: 30upx;
				color: #000000;
				font-weight: bold;
				margin-bottom: 10upx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 使用省略号表示超出部分 */
			}

			&-line {
				display: flex;
				align-items: center;
				margin-top: 4upx;

				text {
					font-size: 24upx;
					color: #4d4d4d;
				}

				&.tag {
					margin-bottom: 6upx;
				}
			}

			&-info {
				display: flex;
				align-items: center;

				text {
					font-size: 22upx;
					color: #808080;
					margin-left: 10upx;
					border-left: 3upx solid #808080;
					display: block;
					padding-left: 10upx;
					height: 24upx;
					line-height: 24upx;

					&:first-child {
						margin-left: 0;
						border-left: 0;
						padding-left: 0;
					}
				}
			}
		}

		&-user {
			display: flex;
			flex-direction: column;
			align-items: center;

			&-picdir {
				width: 110upx;
				height: 110upx;
				border: 2upx solid #c5c5c5;
				border-radius: 50%;
				position: relative;

				image {
					width: 110upx;
					height: 110upx;
					border-radius: 50%;
				}
			}

			&-sex {
				position: absolute;
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				right: -10upx;
				top: -10upx;

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
	}

	.item {
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 30upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		
		&-brief {
			line-height: 1.5;
		
			&-box {
				margin-top: 20upx;
			}
		
			text {
				font-size: 26upx;
				color: #666666;
			}
		}

		&-label {
			width: 130upx;
			display: block;
			text-align: justify;
			text-align-last: justify;
			/* 对最后一行进行两端对齐 */
		}
		
		&-value{
			min-width: 200upx;
		}

		&-more {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 20upx;

			&.rorate {
				transform: rotate(180deg);
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-info {
			display: flex;
			align-items: center;
			line-height: 28upx;
			margin-top: 10upx;
			height: 28upx;

			&:nth-child(1) {
				margin-top: 0;
			}

			&-box {
				margin-top: 20upx;
			}

			text {
				line-height: 28upx;
				font-size: 26upx;
				color: #666666;
			}
			view{
				line-height: 28upx;
				font-size: 26upx;
				color: #666666;
				margin-right: 30upx;
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}

	.common {
		border-top: 3upx solid #f5f5f5;
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 30upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		&.popup{
			min-height: 600upx;
		}
		
		&-more{
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 80upx;
			transition: .2s linear all;
			&.rorate{
				transform: rotate(180deg);
			}
		}

		&-label {
			font-size: 34upx;
			font-weight: bold;
			color: #000;
			margin-bottom:40upx;
		}
		&-item{
			margin-bottom: 40upx;
		}

		&-line {
			display: flex;
			align-items: center;

			&:last-child {
				margin-bottom: 0;
			}

			text {
				font-size: 24upx;
				color: #808080;
			}
		}
	}
	.company{
		margin-bottom: 25upx;
		display: flex;
		height: 100upx;
		&-picdir{
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			border:2upx solid #b6b6b6;
			margin-right: 15upx;
			image{
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
			}
		}
		&-data{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			&-title{
				font-size: 26upx;
				color: #666666;
				margin-bottom: 10upx;
			}
			&-date{
				font-size: 22upx;
				color: #666666;
			}
		}
	}
</style>